<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Customers List</title>
  </head>
  <body>
    <div id="searchdiv" style="height:20px;">
    </div>
    <br><br>
    <div id="customersgrid">
    </div>
    <br>
    <div id="passengersgrid" style="height:280px;">
    </div>
    <div id="customerrecord" class="x-hidden">
    </div>
    <script>
        //Ext.namespace("trailblazer.user");
        /*
         * Ext JS Library 2.1
         * Copyright(c) 2006-2008, Ext JS, LLC.
         * licensing@extjs.com
         *
         * http://extjs.com/license
         */
        //为了一般JS方法可以调用，这个变量定义要放在onReady外面．
        var customerDS;
        var birthDay;
        var customerHistoryWin;
        Ext.onReady(function(){
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            // fix the bug in codepress - resize
            //Ext.BoxComponent.prototype.setSize('100%', '125px');
            //search Tab
            var tabs = new Ext.TabPanel({
                id: 'tabs',
                renderTo: 'searchdiv',
                activeTab: 0,
                width: '100%',
                height: 55,
                plain: true,
                defaults: {
                    autoScroll: true
                },
                items: [{
                        id: 'tab1',
                        title: '用户搜索',
                        autoLoad: {
                            url: '/customers/searchByUserTypeView', //params: 'id=<%=@id%>&phone_number=<%=@phone_number%>'
                            //params: 'id=1'
                            nocache: true,
                            scripts: true
                        }
                    }, {
                        id: 'tab2',
                        title: '生日查询',
                        autoLoad: {
                            url: '/customers/searchByUserBirthday',
                            nocache: true,
                            scripts: true
                        }
                    }]
            });
            //end search Tab
            /************************************************************
             * Display the result in page
             * the column model has information about grid columns
             * dataIndex maps the column to the specific data field in
             * the data store (created below)
             ************************************************************/
            var customerCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 50,
                    hidden: true
                }, {
                    header: "客户名称",
                    width: 70,
                    dataIndex: 'name'
                }, {
                    header: "性别",
                    width: 40,
                    dataIndex: 'sex'
                }, {
                    header: "电话",
                    width: 100,
                    dataIndex: 'phone'
                }, {
                    header: "证件类型",
                    width: 60,
                    dataIndex: 'card_type'
                }, {
                    header: "证件号码",
                    width: 140,
                    dataIndex: 'card'
                }, {
                    header: "生日",
                    width: 75,
                    dataIndex: 'birthday',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d')
                }, {
                    header: "会员卡号",
                    width: 100,
                    dataIndex: 'customer_no'
                }, {
                    header: "地址",
                    width: 150,
                    dataIndex: 'address'
                }, {
                    header: "联系人",
                    width: 60,
                    dataIndex: 'linkman'
                }, {
                    header: "联系人电话",
                    width: 90,
                    dataIndex: 'linkman_phone'
                }, {
                    header: "类型",
                    width: 60,
                    dataIndex: 'customer_type'
                }, {
                    header: "级别",
                    width: 50,
                    dataIndex: 'customer_level'
                }, {
                    header: "编辑时间",
                    width: 125,
                    dataIndex: 'updated_at',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                }, {
                    header: "加入时间",
                    width: 125,
                    dataIndex: 'created_at',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                }]);
                
            /************************************************************
             * connect to backend - grid - core part
             * create the Data Store
             *   connect with backend and list the result in page
             *   through JSON format
             ************************************************************/
            customerDS = new Ext.data.Store({
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                proxy: new Ext.data.HttpProxy({
                    url: '/customers/getCustomers'
                }),
                // create reader that reads the Topic records
                reader: new Ext.data.JsonReader({
                    root: 'root',
                    totalProperty: 'totalProperty',
                    id: 'id'
                }, [{
                        name: 'id'
                    }, {
                        name: 'name'
                    }, {
                        name: 'sex'
                    }, {
                        name: 'phone'
                    }, {
                        name: 'card_type',
                        mapping: 'card_type.card_type'
                    }, {
                        name: 'card'
                    }, {
                        name: 'birthday'
                    }, {
                        name: 'customer_no'
                    }, {
                        name: 'address'
                    }, {
                        name: 'linkman'
                    }, {
                        name: 'linkman_phone'
                    }, {
                        name: 'customer_type',
                        mapping: 'customer_type.customer_type'
                    }, {
                        name: 'customer_level'
                    }, {
                        name: 'updated_at'
                    }, {
                        name: 'created_at'
                    }])
            });
                
                
            /************************************************************
             * add a paging toolbar to the grid's footer
             ************************************************************/
            var myPagingToolbar = new Ext.PagingToolbar({
                pageSize: 10,
                displayInfo: true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: "没有记录",
                store: customerDS
            });
                
            /************************************************************
             * Define menubar now in here
             *   add and delete functions
             ************************************************************/
            var menubar = [{
                    text: '增加客户',
                    tooltip: 'Add a new customer',
                    iconCls: 'addItem',
                    handler: function(){
                        CreateCustomer(customerDS);
                    }
                }, '-', {
                    text: '删除客户',
                    tooltip: 'Remove the selected items',
                    iconCls: 'remove',
                    handler: function(){
                        // delete customer now - action
                        DeleteCustomer(customerDS, customerGridPanel);
                    }
                }, '-', {
                    text: '编辑客户',
                    tooltip: '编辑客户',
                    iconCls: 'editItem',
                    handler: function(){
                        // delete costlevel now - action
                        EditCustomer(customerDS, customerGridPanel);
                    }
                }, '-', {
                    text: '编辑记录',
                    tooltip: '编辑记录',
                    iconCls: 'record',
                    handler: function(){
                        // delete costlevel now - action
                        getCustomerHistory(customerDS, customerGridPanel);
                    }
                }];
            /************************************************************
             * define grid panel now
             ************************************************************/
            var customerGridPanel = new Ext.grid.GridPanel({
                border: false,
                el: 'customersgrid',
                ds: customerDS,
                cm: customerCM,
                autoWidth: true,
                //viewConfig: {
                //    forceFit: true
                //},
                loadMask: true,
                //iconCls: 'icon-grid',
                collapsible: true,
                animCollapse: false,
                autoWidth: true,
                //frame: true,
                title: '客户列表',
                tbar: menubar,
                bbar: myPagingToolbar,
                height:450
            });
                
            //panel render
            customerGridPanel.render();
            // trigger the data store load
            customerDS.load({
                params: {
                    start: 0,
                    limit: 10
                }
            });
                
            /************************************************************
             * Action - edit
             *   handle double click
             *   user select one of the item and want to update it
             ************************************************************/
            customerGridPanel.on('rowdblclick', function(customerGridPanel, rowIndex, e){
                var selectedId = customerDS.data.items[rowIndex].id;
                passengerDS.baseParams.customer_id = selectedId;
                passengerDS.load();
            });
            ///------------------------------Passenger List-------------------------------------------
            var passengerCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 150,
                    hidden: true
                }, {
                    header: "客户名称",
                    width: 100,
                    dataIndex: 'name'
                }, {
                    header: "性别",
                    width: 100,
                    dataIndex: 'sex'
                }, {
                    header: "电话",
                    width: 100,
                    dataIndex: 'phone'
                }, {
                    header: "类型",
                    width: 100,
                    dataIndex: 'customer_type'
                }, {
                    header: "级别",
                    width: 100,
                    dataIndex: 'customer_level'
                }]);
                
            /************************************************************
             * connect to backend - grid - core part
             * create the Data Store
             *   connect with backend and list the result in page
             *   through JSON format
             ************************************************************/
            passengerDS = new Ext.data.Store({
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                proxy: new Ext.data.HttpProxy({
                    url: '/customers/getPassengersByCustomerID'
                }),
                    
                // create reader that reads the Topic records
                reader: new Ext.data.JsonReader({
                    root: 'root',
                    totalProperty: 'totalProperty',
                    id: 'id'
                }, [{
                        name: 'id'
                    }, {
                        name: 'name'
                    }, {
                        name: 'sex'
                    }, {
                        name: 'phone'
                    }, {
                        name: 'passenger_type'
                    }, {
                        name: 'passenger_level'
                    }])
            });
                
                
            /************************************************************
             * add a paging toolbar to the grid's footer
             ************************************************************/
            var myPagingToolbar = new Ext.PagingToolbar({
                pageSize: 10,
                displayInfo: true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: "没有记录",
                store: passengerDS
            });
            /************************************************************
             * define grid panel now
             ************************************************************/
            var passengerGridPanel = new Ext.grid.GridPanel({
                border: false,
                el: 'passengersgrid',
                ds: passengerDS,
                cm: passengerCM,
                //width: 1300,
                height: 350,
                loadMask: true,
                //frame: true,
                iconCls: 'icon-grid',
                collapsible: true,
                animCollapse: false,
                title: '常旅客列表',
                //tbar: menubar,
                bbar: myPagingToolbar
            });
                
            //panel render
            passengerGridPanel.render();
            // trigger the data store load
            passengerDS.load({
                params: {
                    start: 0,
                    limit: 10
                }
            });
            passengerGridPanel.setVisible(false);
                
        });
        
    </script>
  </body>
</html>
